<template>
    <PageView>
        <a-card title="幸运天数">
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="false"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Orders from '../../api/Orders'
    export default {
        name: 'lucyDay',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '名称',
                        dataIndex: 'name',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '概率',
                        dataIndex: 'chance',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-button-group>
                                    <a-button
                                        type="primary"
                                        onClick={()=>{
                                            this.changeInfo(v)
                                        }}>
                                        修改
                                    </a-button>
                                </a-button-group>
                            )
                        }
                    }
                ],
                data: [],
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getList () {
                this.loading = true
                Orders.LuckDayList().then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                })
            },
            changeInfo(v){
                let name  = v.name
                let chance = v.chance
                this.$confirm({
                    title: `比例设置`,
                    content: (
                        <div>
                            名称
                            <a-input defaultValue={name} style="margin-top:10px;" placeholder="名称" onInput={(val) => {
                                name = val.target.value
                            }}/>
                            概率
                            <a-input defaultValue={chance} style="margin-top:10px;" placeholder="概率" onInput={(val) => {
                                chance = val.target.value
                            }}/>
                        </div>
                    ),
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            if (name === ''|| chance === '') {
                                this.$notification.warning({
                                    message: '提示',
                                    description: '请输入完整'
                                })
                                reject()
                            } else {
                                Orders.saveLuckDay({ id:v.id,name,chance}).then(res => {
                                    resolve()
                                    this.getList()
                                }).catch(res => {
                                    reject()
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
    .imgCon{
        @size:80px;
        width: @size;
        height: @size;
        border-radius: 4px;
        border: 1px dashed rgba(0,0,0,0.2);
        margin: 10px auto;
        background: rgba(200,200,200,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .text{
            font-size: 13px;
            color: rgba(0,0,0,0.5);
        }
        input{
            position: absolute;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            opacity: 0;
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
</style>